<template>
  <div>
    <el-carousel height="400px">
      <el-carousel-item>
        <el-image style="width: 100%" src="/src/assets/images/banner1.png" fit="cover" />
      </el-carousel-item>
      <el-carousel-item>
        <el-image style="width: 100%" src="/src/assets/images/banner2.png" fit="cover" />
      </el-carousel-item>
      <el-carousel-item>
        <el-image style="width: 100%" src="/src/assets/images/banner3.png" fit="cover" />
      </el-carousel-item>
    </el-carousel>

    <div class="card-container">
      <HomeCard
        title="新闻资讯"
        :category="3"
        :source-data="bidData1"
      ></HomeCard>
      <HomeCard
        title="信息公告"
        :category="4"
        :source-data="bidData2"
      ></HomeCard>
    </div>

    <el-dialog :visible.sync="searchDialogOpenState">
      <el-input v-model="keyword" @change="handleSearch">
        <template #append>
          <el-button @click="handleSearch">搜索</el-button>
        </template>
      </el-input>

      <ul
        v-if="searchResult.length > 0"
        style="
          list-style: none;
          max-height: 60vh;
          overflow-y: auto;
          scrollbar-gutter: stable;
        "
      >
        <li
          v-for="bidding in searchResult"
          :key="bidding"
          @click="jumpTo(bidding.id)"
          class="item"
        >
          {{ bidding.bidTitle }}
        </li>
      </ul>
      <div v-else>无内容请搜索</div>
    </el-dialog>

    <!--    悬浮球-->
    <DragButton></DragButton>
  </div>
</template>

<script>
import HomeCard from "@/components/Platform/HomeCard.vue";
import DragButton from "@/components/DragButton/index.vue";

import { listBidding } from "@/api/bid/bidding";
import { listBanner } from "@/api/bid/banner";
import { getBaseUrl } from "@/utils/env";

export default {
  components: { HomeCard, DragButton },
  data() {
    return {
      swiperOption: {
        autoplay: {
          delay: 1500,
        },
        slidesPerView: "auto",
        centeredSlides: true,
        spaceBetween: 30,
        loop: true,
        activeIndex: 2,
      },

      images: undefined,
      bidData1: undefined,
      bidData2: undefined,

      searchDialogOpenState: false,
      keyword: "",
      searchResult: [],
    };
  },
  methods: {
    async getData() {
      this.images = (await listBanner()).rows.map((it) => {
        it.url = getBaseUrl() + it.url;
        return it;
      });
      this.bidData1 = (await listBidding({ category: 3 })).rows;
      this.bidData2 = (await listBidding({ category: 4 })).rows;
    },

    async handleSearch() {
      this.searchResult = (await listBidding({ bidTitle: this.keyword })).rows;
    },

    jumpTo(id) {
      this.$router.push(`/bid/detail?id=${id}`);
    },
  },
  mounted() {
    this.getData();

    document.documentElement.addEventListener("keydown", (e) => {
      if (e.ctrlKey && e.key === "k") {
        e.preventDefault();
        this.searchDialogOpenState = true;
      }
    });
  },
};
</script>

<style scoped>
.swiper {
  height: 33vh;
}

.swiper-wrapper {
  width: 100vw;
}

.swiper-slide {
  width: 1000px;
  margin-left: 30px;
}

.bannerImage {
  width: 100%;
  height: 35vh;
  border-radius: 10px;
  opacity: 1;
  border: 0;
}

.card-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 50px;
  padding: 0 calc((100% - 1800px) / 2);
  margin-top: 50px;
}

@media screen and (max-width: 540px) {
  .card-container {
    width: 100%;
    padding: 0;
    grid-template-columns: 1fr;
  }
}

.item:hover {
  color: #1ad0b6;
}
</style>


